<template>
    <view class="main-box">
            <!-- 搜索框 -->
            <view class="search-box">
                <uni-search-bar radius="20" cancelButton="none"   clearButton="none" class="search" >
                    <template v-slot:searchIcon> </template>
                </uni-search-bar>
                <view class="down"  @click="getPark">
                    <text>  所有园区 </text>
                    <uni-icons type="bottom" size="10" color="#fff"></uni-icons>
                </view>
            </view>

            <!-- <view class="text-box">
                <view class="sort">综合排序  <uni-icons type="bottom" size="10" color="#ccc"></uni-icons></view>
                <view class="filter">筛选 <uni-icons type="bottom" size="10" color="#ccc"></uni-icons></view>
            </view> -->

            <!-- 引入公共组件 -->
            <mescroll-body
                ref="'mescrollRef'"
                @init="mescrollInit"
                height="100%"
                @down="downCallback"
                :up="upOption"
                @up="upCallback"
            >
            <view class="list-box">
                <block v-for="(value, index) in logisticsList" :key="index">
                    <fsw-item :value="value"></fsw-item>
                </block>
            </view>
            
            </mescroll-body>
          

            <!-- 园区 -->
            <uni-popup ref="popup" type="bottom" >
                <view class="pick-box " >
                    <view class="title-box ">
                        <view class="yuan">选择园区</view>
                        <view class="cur">临沂市</view>
                    </view>
                    <view class="list ">
                        <view class="item"  @click="bindChange"  v-for="(item,index) in candidates" :key="index">
                            {{ item.name }}
                            <view class="num">  {{ item.num }}</view>
                        </view>
                    </view>
                </view>
            </uni-popup>
    </view>
   
</template>

<script>

import company from './company.js';
import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins.js';
import MescrollMoreItemMixin from '@/components/mescroll-uni/mixins/mescroll-more-item.js';

	export default {
		components: {},
        mixins: [MescrollMixin, MescrollMoreItemMixin,company],
	}
</script>

<style lang="scss">

    .main-box{
        position: relative;
    }
    .search-box{
        position: relative;
        .search{
            border-color: orange;
        }
        .down{
            z-index: 10;
            background-color: orange;
            position: absolute;
            right:15px;
            top:15px;
            width:80px;
            height: 20px;
            line-height: 20px;
            color:#fff;
            border-radius: 10px;
            display: flex;
            padding:3px 4px;
            justify-content: space-around;
            font-size: 12px;
        }
    }
	
    .text-box{
        display: flex;
        justify-content: space-between;
        padding: 3px 14px;
    }
    .pick-box{
        padding: 10px 15px 30px;
        background-color: #fff;
        .title-box{
            display: flex;
            justify-content: space-between;
            height: 40px;
            line-height: 40px;
            .yuan{
                color:#000;
                font-weight: bold;
                font-size: 14px;
            }
            .cur{
                font: 10px;
                color: orange;
            }
        }
        .list{
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            .item{
                width: 48%;
                border: 1px solid #ccc;
                height: 30px;
                line-height: 30px;
                text-align: center;
                position: relative;
            }
            .num{
                position: absolute;
                top:0px;
                right: 0px;
                width: 20px;
                height: 12px;
                line-height: 12px;
                font-size: 8px;
                background-color: orange;
                color: #eee;
                border:1px solid #bbb;
            }
        }

    }


/* 图文列表 */

.uni-media-list {
	padding: 22rpx 30rpx 0rpx 30rpx;
	box-sizing: border-box;
	display: flex;
	width: 100%;
	flex-direction: row;
}
.uni-media-list-left {
	height: 100%;
	box-sizing: border-box;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	.uni-media-list-left-bottom {
		border-radius: 20rpx;
		font-size: 22rpx;
		color: black;
		margin-top: 8rpx;
		padding-left: 10rpx;
		padding-right: 10rpx;
		// padding-top: 8rpx;
		// padding-bottom: 8rpx;
		background-color: $uni-text-color-primary;
	}
}
.uni-media-list-logo {
	width: 140rpx;
	height: 140rpx;
	margin-right: 0rpx;
    border-radius: 20px;
}
.uni-media-list-body {
	height: auto;
	padding-left: 16rpx;
	justify-content: space-around;
}

.uni-media-list-text-top {
	// height: 74rpx;
	font-size: 28rpx;
	// overflow: hidden;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	.view-left {
		margin-bottom: 16rpx;
		border-radius: 20rpx;
		margin-top: 8rpx;
		padding-left: 6rpx;
		padding-right: 6rpx;
		padding-top: 2rpx;
		padding-bottom: 2rpx;
		background-color: $uni-bg-color-red;
		align-items: center;
		justify-content: center;
		display: flex;
		.text {
			color: white;
			margin-bottom: 0rpx;
			margin-right: 8rpx;
			font-size: 24rpx;
		}
	}
	.image {
		margin-left: 6rpx;
		margin-right: 6rpx;
		width: 28rpx;
		height: 28rpx;
	}
	.item{
		width: 60rpx;
		height: 40rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		
		margin-bottom: 16rpx;
		  
		padding-left: 8rpx;
		padding-right: 8rpx;
		border-radius: 5rpx;
		border: 1px solid $uni-back-color-primary;
	}
	.text {
		font-size: 30rpx;
		margin-top: 0rpx;
		margin-bottom: 16rpx;
	}
	.text1 {
		font-size: 24rpx;
		color: $uni-text-color-primary;
	}

	.text2 {
		font-size: 28rpx;
		color: #8f8f94;
		margin-bottom: 16rpx;
	}
	.text3 {
		font-size: 24rpx;
	}
}

.uni-media-list-text-bottom {
	display: flex;
	flex-direction: row;
	font-size: 28rpx;
	margin-bottom: 16rpx;
	justify-content: space-between;
}

</style>